<template>
  <div class="box">
    <van-nav-bar title="我的地址" left-arrow @click-left="$router.go(-1)" />
    <div class="content">
      <input-city
        :bag="nameColor"
        @blur="nameBtn"
        leftText="联系人"
        v-model="name"
      >
      </input-city>
      <input-city
        leftText="手机号码"
        v-model="phone"
        :bag="bagColor"
        @blur="phoneBtn"
      ></input-city>
      <div class="cityS" @click="isShow = true">
        <p>选择地区</p>
        <ul>
          <li v-for="(v, i) in address" :key="i">{{ v.name }}</li>
        </ul>
      </div>
      <input-city
        leftText="详细地址"
        v-model="school"
        :bag="schoolColor"
        @blur="schoolBtn"
      ></input-city>
      <input-city
        leftText="邮政编码"
        v-model="mail"
        :bag="mailColor"
        @blur="mailBtn"
      ></input-city>

      <cityBtn @click="save" type="green" text="保存"></cityBtn>
      <cityBtn type="blue" text="从微信读取"></cityBtn>
      <cityBtn @click="$router.go(-1)" type="ccc" text="取消"></cityBtn>
    </div>
    <van-popup position="bottom" v-model:show="isShow">
      <van-area
        @change="pushValue"
        @confirm="psuhCity"
        @cancel="isShow = false"
        v-show="isShow"
        title="标题"
        :area-list="areaList"
      />
    </van-popup>
  </div>
</template>

<script>
import inputCity from "../inputCity/inputCity.vue"; // input  组件封装
import cityBtn from "../inputCity/cityBtn.vue"; // button 组件
import { areaList } from "@vant/area-data";
import { reactive, ref, toRefs } from "vue";
import { Toast } from "vant";
import { addCity } from "@/api";
import { useRouter } from "vue-router";
export default {
  setup() {
    let bagColor = ref("#49b5ef"); // 手机颜色验证
    let mailColor = ref("#49b5ef"); // 邮政编码验证
    let schoolColor = ref("#49b5ef"); // 详细地址
    let nameColor = ref("#49b5ef"); // 名字颜色
    let isShow = ref(false); // 控制弹框
    let router = useRouter();
    let obj = reactive({
      // 输入框的数据
      name: "",
      phone: "",
      city: "",
      school: "",
      mail: "",
      address: "",
    });
    const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; // 手机
    const postalNoReg = /^\d{6}$/; // 邮箱
    const cnReg = /[\u4E00-\u9FA5]/; // 地址
    // 保存的函数
    function save() {
      console.log(obj);

      let token = localStorage.getItem("token");
      addCity(token, obj).then((res) => {
        console.log(res);
        Toast.success("保存成功");
      });
    }
    // 手机号验证
    function phoneBtn() {
      if (phoneReg.test(obj.phone)) {
        bagColor.value = "#90fc7c";
      } else {
        bagColor.value = "red";
      }
    }
    // 邮政编码验证
    function mailBtn() {
      if (postalNoReg.test(obj.mail)) {
        mailColor.value = "#90fc7c";
      } else {
        mailColor.value = "red";
      }
    }
    // 地址验证
    function schoolBtn() {
      if (cnReg.test(obj.school)) {
        schoolColor.value = "#90fc7c";
      } else {
        schoolColor.value = "red";
      }
    }
    // 名字验证
    function nameBtn() {
      if (/^[\u4e00-\u9fa5]{2,6}$/.test(obj.name)) {
        nameColor.value = "#90fc7c";
      } else {
        nameColor.value = "red";
      }
    }
    // 存放城市
    var localCity = [];
    function psuhCity() {
      obj.address = localCity;
      isShow.value = false;
    }
    // 拼接城市
    function pushValue(value) {
      localCity = value;
    }
    return {
      bagColor,
      save,
      ...toRefs(obj),
      phoneBtn,
      mailBtn,
      mailColor,
      schoolBtn,
      schoolColor,
      nameBtn,
      nameColor,
      areaList,
      isShow,
      areaList,
      psuhCity,
      pushValue,
    };
  },

  components: {
    inputCity,
    cityBtn,
  },
};
</script>

<style lang="scss" scoped>
footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.cityS {
  height: 100px;
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgb(212, 205, 205);
  ul {
    display: flex;
    align-items: center;
    font-size: 26px;
    li {
      margin: 0 5px;
      color: rgb(158, 154, 154);
    }
  }
  p {
    width: 20.5%;
    height: 60px;
    font-size: 29px;
    line-height: 60px;
  }
}
.box {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.content {
  width: 100%;
  padding: 0 20px;
}
</style>
